<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="my-element.html">
<dom-module id="parent-element">
	<template>
		<my-element id="myElement" name="我就是我，不一样的烟火"></my-element>
		<button on-click="handleChange">父组件</button>
		<button on-click="handleRemove">remove</button>
	</template>
	<script>
		ParentElement = Polymer({
			is: 'parent-element',
			handleChange: function() {
				var myElement = document.getElementById("myElement");
				myElement.setAttribute("name", "我是父组件，我把我嵌套这货改变了");
			},
			handleRemove: function() {
				//补充一下这里$符号的作用是可以用$.id的方式快速访问子组件（上面个handleChange函数则是传统方式）
				this.$.myElement.parentNode.removeChild(this.$.myElement);
			},
			created: function() {//当组件被 new 时调用，最早被触发，此时还不能访问组件的属性
				console.log("我是父组件，我被new出来了"+this.localName + '#' + this.id + ' was created');
			},
			ready: function() {//当组件内部依赖的子组件或者原生dom组件加载成功，会调用ready
				console.log("我是父组件，我的子组件和原生DOM全部加载成功了"+this.localName + '#' + this.id + ' was ready');
			},
			attached: function() {//组件被添加到父组件中（显示在舞台）时触发，只会触发一次
				console.log("我是父组件，我被添加到了我的父组件之中了"+this.localName + '#' + this.id + ' was attached');
			}
		});
	</script>
</dom-module>